<template>
  <div class="login-container">
    <div class="login-header">
      <h2>欢迎登录</h2>
      <p>请输入您的账号信息</p>
    </div>
    
    <div class="login-body">
      <el-form class="login-form" :model="form" :rules="rules" ref="loginForm">
        <el-form-item prop="username">
          <el-input 
            v-model="form.username" 
            placeholder="请输入用户名"
            :prefix-icon="User"
          >
          </el-input>
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input 
            v-model="form.password" 
            type="password"
            placeholder="请输入密码"
            show-password
            :prefix-icon="Lock"
          >
          </el-input>
        </el-form-item>
        
        <div class="remember-forgot">
          <el-checkbox v-model="form.remember">记住我</el-checkbox>
          <el-link type="primary" :underline="false">忘记密码?</el-link>
        </div>
        
        <el-button 
          class="login-btn"
          type="primary"
          @click="submitForm"
          :loading="loading"
        >
          登录
        </el-button>
      </el-form>
      
      <div class="social-login">
        <p>其他登录方式</p>
        <div class="social-icons">
          <div class="social-icon wechat">
            <el-icon :size="24"><ChatRound /></el-icon>
          </div>
          <div class="social-icon qq">
            <el-icon :size="24"><Iphone /></el-icon>
          </div>
          <div class="social-icon github">
            <el-icon :size="24"><Platform /></el-icon>
          </div>
        </div>
      </div>
      
      <div class="register-link">
        还没有账号? <a href="#">立即注册</a>
      </div>
    </div>
    
    <div class="footer">
      © 2023 企业管理系统 | 版权所有
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { User, Lock, ChatRound, Iphone, Platform } from '@element-plus/icons-vue';
import router from '@/router';

const loginForm = ref(null);
const loading = ref(false);

const form = ref({
  username: '',
  password: '',
  remember: false
});

const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
});

const submitForm = () => {
  loginForm.value.validate(valid => {
    if (valid) {
      loading.value = true;
      
      // 模拟登录请求
      setTimeout(() => {
        loading.value = false;
        
        // 实际项目中这里应该是API请求
        if (form.value.username === '好前程' && form.value.password === '123456') {
          ElMessage.success({
            message: '登录成功',
            duration: 3000
          });
          router.push({
            path:'axios'
          })
        } else {
          ElMessage.error({
            message: '用户名或密码错误',
            duration: 3000
          });
        }
      }, 1500);
    } else {
      return false;
    }
  });
};
</script>

<style scoped>
.login-container {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: fadeIn 0.8s ease-out;
  margin: 0 auto;
  height: 100vh;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-header {
  background: linear-gradient(to right, #3498db, #2ecc71);
  color: white;
  padding: 30px 20px;
  text-align: center;
  position: relative;
}

.login-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('');
  opacity: 0.2;
}

.login-header h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.login-header p {
  font-size: 16px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.login-body {
  padding: 30px;
}

.login-form .el-form-item {
  margin-bottom: 25px;
}

.login-form .el-input__wrapper {
  border-radius: 8px;
  padding: 12px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.login-form .el-input__prefix {
  margin-right: 10px;
}

.login-form .el-input__prefix svg {
  width: 18px;
  height: 18px;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.login-btn {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(to right, #3498db, #2ecc71);
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(52, 152, 219, 0.4);
}

.login-btn:active {
  transform: translateY(0);
}

.social-login {
  margin-top: 30px;
  text-align: center;
}

.social-login p {
  position: relative;
  color: #909399;
  margin-bottom: 20px;
}

.social-login p::before,
.social-login p::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: #dcdfe6;
}

.social-login p::before {
  left: 0;
}

.social-login p::after {
  right: 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.social-icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.15);
}

.social-icon.wechat {
  background: linear-gradient(to right, #09bb07, #2add1c);
  color: white;
}

.social-icon.qq {
  background: linear-gradient(to right, #12b7f5, #2a8add);
  color: white;
}

.social-icon.github {
  background: linear-gradient(to right, #333, #000);
  color: white;
}

.register-link {
  text-align: center;
  margin-top: 25px;
  color: #606266;
}

.register-link a {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.register-link a:hover {
  color: #2ecc71;
  text-decoration: underline;
}

.footer {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-size: 14px;
  border-top: 1px solid #ebeef5;
}

@media (max-width: 480px) {
  .login-container {
    max-width: 100%;
  }
  
  .login-body {
    padding: 20px;
  }
  
  .remember-forgot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .social-login p::before,
  .social-login p::after {
    width: 25%;
  }
}
</style>